<template>
	<view class="orderManagement">
		<view class="content">
			<view class="inputValueBox">
				<u--input focus v-model="valueData" customStyle="background: #fff;" @confirm="on_confirm()"
					shape="circle" border="true" :adjustPosition="false" fontSize="14px"
					placeholder="订单号" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
			</view>
			<view class="ul" v-for="item in orderList" :key="item.id">
				<div class="li liTwo">
					<div class="name">订单编号：</div>
					<div class="contentValue">{{ item.order_sn }} <view class="duplicate" @click="copyOrderId(item.order_sn)">复制</view></div>
				</div>
				<div class="li">
					<div class="name">用户ID：</div>
					<div class="contentValue">{{ item.user_id }}</div>
				</div>
				<div class="li">
					<div class="name">客服号：</div>
					<div class="contentValue">{{ item.follow_user }}</div>
				</div>
				<div class="li">
					<div class="name">标题：</div>
					<div class="contentValue">{{ item.title }}</div>
				</div>
				<div class="li">
					<div class="name">价格：</div>
					<div class="contentValue">{{ item.unit_price }}</div>
				</div>
				<div class="li">
					<div class="name">支付状态：</div>
					<div class="contentValue">
					{{ item.pay_status == 0 ? '待支付' : item.pay_status == 1 ? '已支付' : item.pay_status == 2 ? '已退款' :
						item.pay_status
						  == 3 ? '拒绝退款' : ""
					}}
					</div>
				</div>
				<div class="li liTwo">
					<div class="name">祝福语：</div>
					<div class="contentValue">{{ item.blessing }}</div>
				</div>
				<div class="li liTwo">
					<div class="name">果树编号：</div>
					<div class="contentValue">{{ item.tree_num }}</div>
				</div>
				<div class="li">
					<div class="name">退款状态：</div>
					<div class="contentValue">
						{{ item.refund_status == 0 ? '未退款' : item.refund_status == 1 ? '部分退款' : item.refund_status == 2 ? '全部退款' : ""
						            }}
					</div>
				</div>
				<div class="li">
					<div class="name">下单时间：</div>
					<div class="contentValue">{{ item.addtime }}</div>
				</div>
				<div class="li">
					<div class="name">领取数量：</div>
					<div class="contentValue">
						{{ item.order_num }} / {{ item.receive_num }}
					</div>
				</div>
				<view class="btnBox liTwo">
					<view class="btn"  v-if="item.pay_status == 1">
						<u-button @click="on_operate(item)" type="primary" text="添加祝福语"></u-button>
					</view>
					<view class="btn">
						<u-button @click="see_sub(item)" type="primary" text="查看子订单"></u-button>
					</view>
				</view>
			</view>
			<view class="pagination" v-if="total">
				<uni-pagination @change="on_change" :total="total"></uni-pagination>
				<view class="example">
					<text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
				</view>
			</view>

			<!-- <view v-if="orderList.length <= 0 && pageIndex != 2" class="noData">请搜索数据</view> -->

		</view>

		<u-modal @confirm="on_defineOperation()" @cancel="showType = false" :showCancelButton="true" :show="showType"
			title="添加祝福语">
			<view class="slot-content">
				<view class="selectBox">
					<view class="name">祝福语：</view>
					<view class="select">
						<u--input placeholder="请输入祝福语" border="surround" v-model="typeForm.blessing"></u--input>
					</view>
				</view>

				<view class="selectBox">
					<view class="name">果树编号：</view>
					<view class="select">
						<u--input placeholder="请输入果树编号" border="surround" v-model="typeForm.tree_num"></u--input>
					</view>
				</view>
			</view>
		</u-modal>

		<u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)" :loading="loadingType">
		</u-loading-page>
	</view>
</template>

<script>
export default {
	data() {
		return {
			expressList: [],
			loadingType: false,
			showType1: false,
			form: {
				money: '',
				type: '取消订单',
				is_refund: '是',
				// refund_reason_type: '其它'
			},
			typeForm: {
				blessing: "",
				tree_num: "",
				order_id:0
			},
			showType: false,
			valueData: '',
			total: 0,
			page: 1,
			orderList: [],
			orderId: '',
			showBtn: true, //可点击状态
		};
	},
	onShow() {
		this.ajax_orderList()
		
	},
	onLoad() {
	},
	methods: {
		//复制订单号
		copyOrderId(oid){
			var that = this;
			uni.setClipboardData({
				data: oid,
				success: function () {
					that.$showToast('复制成功')
				}
			});
		},
		on_confirm() {
			this.ajax_orderList()
		},
		// 全部订单
		ajax_orderList() {
			this.loadingType = true;
			this.$request.request({
				url: 'order/treeOrderListMobile',
				method: 'POST',
				data: {
					page: this.page,
					searchValue: this.valueData,
					pay_status: 3,
				}
			}).then(res => {
				this.orderList = res.data.list.data
				this.total = res.data.list.total
			}).finally(() => {
				this.loadingType = false;
			})
		},
		on_change(page) {
			this.page = page.current;
			this.ajax_orderList()
		},
		on_defineOperation() {
			if (!this.showBtn) {
				return false;
			}
			this.showBtn = false;
			if (!this.typeForm.blessing) {
				uni.showToast({
					title: '请舒服祝福语',
					icon: 'none'
				})
			} else if (!this.typeForm.tree_num) {
				uni.showToast({
					title: '请输入果树编号',
					icon: 'none'
				})
			} else {
				uni.showLoading({
					title: '加载中···',
					mask: true
				})
				this.$request.request({
					url: 'order/addBlessing',
					method: 'POST',
					data: {
						order_id: this.typeForm.order_id,
						blessing: this.typeForm.blessing,
						tree_num: this.typeForm.tree_num,
					}
				}).then(res => {
					this.showType = false;
					this.ajax_orderList()
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					uni.hideLoading()
					setTimeout(() => {
						this.showBtn = true;
					}, 3000)
				}).finally(() => {

				})
			}
		},
		on_operate(item) {
			this.orderId = item.id
			this.typeForm.order_id = item.id
			this.typeForm.blessing = item.blessing
			this.typeForm.tree_num = item.tree_num
			this.showType = true
		},
		see_sub(item) {
			uni.navigateTo({
				url: "/pages/subAdoptOrder?order_sn="+item.order_sn
			})
		}
	},
};
</script>
<style lang="scss" scoped>
.orderManagement {
	.slot-content {
		width: 100% !important;

		.selectBox {
			// display: flex;
			// align-items: center;
			font-size: 14px;
			margin-top: 30rpx;

			.name {
				white-space: normal nowrap;
				margin-bottom: 20rpx;
			}

			.select {
				flex: 1;

				.radio:nth-child(1) {
					margin-left: 0;
				}

				.radio {
					margin-left: 40rpx;
				}
			}
		}
	}

	.content {
		padding: 20rpx;

		.ul:nth-last-child(1) {
			border-bottom: none;
		}

		.block{
			margin-top: 15rpx;
			width: 100%;
			font-size: 14px;
			padding: 20rpx;
			padding-bottom: 20rpx;
			border: 1px solid #ccc;
			.title{
				font-size: 15px;
				font-weight: 700;
			}
			.li {
				margin-top: 20rpx;
				width: 50%;
			}
		}

		.ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			border-bottom: 1px solid #ccc;
			padding-bottom: 20rpx;
			.li {
				margin-top: 20rpx;
				width: 50%;
				.img{
					width: 100rpx;
					height: 100rpx;
				}
				.contentValue {
					margin-top: 6rpx;
					.duplicate{
						color: #999999;
						font-size: 22rpx;
						border: 2rpx solid #999999;
						border-radius: 8rpx;
						padding:2rpx 8rpx;
						margin-left: 20rpx;
						float:right;
					}
				}
			}

			.liTwo {
				width: 100% !important;
			}

			.btnBox {
				display: flex;
				margin-top: 20rpx;
				max-width: 100%;
				flex-wrap: wrap;
				justify-content: space-between;

				.btn {
					// margin-top: 20rpx;
					margin: 10rpx;
					min-width: 30%;
				}
			}
		}
	}
}
</style>
